define(['js/views/baseview', 'underscore', 'gettext', 'common/js/components/views/feedback_prompt',
    'common/js/components/views/feedback_notification', 'edx-ui-toolkit/js/utils/html-utils'],
function(BaseView, _, gettext, PromptView, NotificationView, HtmlUtils) {
    'use strict';

    var AssetView = BaseView.extend({
        initialize: function() {
            this.template = this.loadTemplate('asset');
            this.listenTo(this.model, 'change:locked', this.updateLockState);
        },
        tagName: 'tr',
        events: {
            'click .remove-asset-button': 'confirmDelete',
            'click .lock-checkbox': 'lockAsset'
        },

        render: function() {
            var uniqueId = _.uniqueId('lock_asset_');
            var attributes = {
                display_name: this.model.get('display_name'),
                thumbnail: this.model.get('thumbnail'),
                date_added: this.model.get('date_added'),
                url: this.model.get('url'),
                external_url: this.model.get('external_url'),
                portable_url: this.model.get('portable_url'),
                static_full_url: this.model.get('static_full_url'),
                asset_type: this.model.get_extension(),
                uniqueId: uniqueId
            };
            this.$el.html(HtmlUtils.HTML(this.template(attributes)).toString());
            this.updateLockState();
            return this;
        },

        updateLockState: function() {
            var lockedClass = 'is-locked';

            // Add a class of "locked" to the tr element if appropriate,
            // and toggle locked state of hidden checkbox.
            if (this.model.get('locked')) {
                this.$el.addClass(lockedClass);
                this.$el.find('.lock-checkbox').attr('checked', 'checked');
            } else {
                this.$el.removeClass(lockedClass);
                this.$el.find('.lock-checkbox').removeAttr('checked');
            }
        },

        confirmDelete: function(e) {
            var asset = this.model;
            if (e && e.preventDefault) { e.preventDefault(); }
            new PromptView.Warning({
                title: gettext('Delete File Confirmation'),
                message: gettext('Are you sure you wish to delete this item. It cannot be reversed!\n\nAlso any content that links/refers to this item will no longer work (e.g. broken images and/or links)'), // eslint-disable-line max-len
                actions: {
                    primary: {
                        text: gettext('Delete'),
                        click: function(view) {
                            view.hide();
                            asset.destroy({
                                wait: true, // Don't remove the asset from the collection until successful.
                                success: function() {
                                    new NotificationView.Confirmation({
                                        title: gettext('Your file has been deleted.'),
                                        closeIcon: false,
                                        maxShown: 2000
                                    }).show();
                                }
                            });
                        }
                    },
                    secondary: {
                        text: gettext('Cancel'),
                        click: function(view) {
                            view.hide();
                        }
                    }
                }
            }).show();
        },

        lockAsset: function() {
            var asset = this.model;
            var saving = new NotificationView.Mini({
                title: gettext('Saving')
            }).show();
            asset.save({locked: !asset.get('locked')}, {
                wait: true, // This means we won't re-render until we get back the success state.
                success: function() {
                    saving.hide();
                }
            });
        }
    });

    return AssetView;
}); // end define()
